<template>
  <div class="play">
    <audio
      :src="songurl"
      controls
      autoplay
      ref="audio"
      @play="onPlay"
      @pause="onPause"
      style="height: 30px; margin-bottom: 100px; display: none"
      @timeupdate="onTimeupdate"
    ></audio>
    <transition name="gobar">
      <PlayBar
        :playingSong="playingSong"
        :playingStatus="playingStatus"
        :total="$refs.audio.duration"
        :current="current"
        v-if="showbar"
      ></PlayBar>
    </transition>

    <transition name="fade">
      <PlayPage
        v-if="popup"
        :playingSong="playingSong"
        :total="$refs.audio.duration"
        :current="current"
        :playingStatus="playingStatus"
        :playMethod="playMethod"
        @change-current="changeCurrent"
        :lyric="lyric"
        @toggle="toggle"
        @update:next-song="$emit('update:next-song', playMethod)"
        @update:last-song="$emit('update:last-song')"
      ></PlayPage>
    </transition>

    <transition name="tomask">
      <div class="mask" v-if="listShow" @click="listShow = false"></div>
    </transition>
    <transition name="list">
      <PlayList
        v-if="listShow"
        :listShow="listShow"
        :playSongList="playSongList"
        :playingStatus="playingStatus"
        :selectedSong="selectedSong"
        :playMethod="playMethod"
        @play-song="$emit('toplay-song', $event)"
        @to-del="$emit('to-del', $event)"
        @toggle="toggle"
      ></PlayList>
    </transition>
    <!-- <Comment v-if="showcom" :songid="playingSong.id"></Comment> -->
  </div>
</template>

<script>
import PlayBar from "@/components/PlayBar.vue";
import PlayPage from "@/components/PlayPage.vue";
import PlayList from "@/components/PlayList.vue";
// import Comment from "@/components/Comment.vue";
export default {
  components: {
    PlayBar,
    PlayPage,
    PlayList,
    // Comment,
  },
  props: [
    "playingSong",
    "showbar",
    "playingStatus",
    "playSongList",
    "selectedSong",
  ],
  data: function () {
    return {
      showcom: true,
      popup: false,
      current: 0,
      lyric: null,
      listShow: false,
      playMethodList: ["circulation", "random", "sequence"],
      playMethod: "circulation",
    };
  },
  computed: {
    songurl() {
      return ` https://music.163.com/song/media/outer/url?id=${this.playingSong.id}.mp3`;
    },
  },
  watch: {
    playingSong(n) {
      this.axios
        .get(`https://apis.netstart.cn/music/lyric?id=${n.id}`)
        .then((ref) => {
          // 原文
          let str = ref.data.lrc.lyric;
          str = str.split("\n");
          let lyric1 = str
            .filter((ele) => ele)
            .map(
              (ele) =>
                ele.match(/^\[(?<time>\d{2}:\d{2}\.\d{2,3})\] *(?<text>.*)$/)
                  .groups
            )
            .map((ele) => ({
              ...ele,
              time: ele.time.split(":")[0] * 60 + ele.time.split(":")[1] * 1,
            }));
          // 译文
          let str1 = ref.data.tlyric.lyric;
          str1 = str1.split("\n");
          str1.shift();
          let tlyric1 = str1
            .filter((ele) => ele)
            .map(
              (ele) =>
                ele.match(/^\[(?<time>\d{2}:\d{2}\.\d{2,3})\] *(?<text>.*)$/)
                  .groups
            )
            .map((ele) => ({
              ...ele,
              time: ele.time.split(":")[0] * 60 + ele.time.split(":")[1] * 1,
            }));
          this.lyric = lyric1.map((ele) => {
            let a = null;
            var f = true;
            tlyric1.forEach((o) => {
              if (ele.time == o.time) {
                f = false;
                a = { ...ele, ttxt: o.text };
              }
            });
            if (f) {
              a = { ...ele, ttext: "" };
            }
            return a;
          });
        });
    },
  },
  methods: {
    onPlay() {
      this.$emit("to-play", true);
    },
    onPause() {
      this.$emit("to-pause", false);
    },
    onTimeupdate() {
      this.current = this.$refs.audio.currentTime;
      if (this.$refs.audio.currentTime == this.$refs.audio.duration) {
        this.$emit("update:next-song", this.playMethod);
      }
    },
    changeCurrent(t) {
      this.$refs.audio.currentTime = t;
    },
    toggle() {
      // console.log(1);
      let n = this.playMethodList.findIndex((ele) => this.playMethod == ele);
      if (n == this.playMethodList.length - 1) {
        this.playMethod = this.playMethodList[0];
      } else {
        this.playMethod = this.playMethodList[n + 1];
      }
    },
  },
};
</script>

<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: translateY(100vh);
}

.gobar-enter-active,
.gobar-leave-active {
  transition: all 0.5s;
}
.gobar-enter,
.gobar-leave-to {
  // opacity: 0;
  transform: translateY(10vh);
}

.list-enter-active,
.list-leave-active {
  transition: all 0.3s;
}
.list-enter,
.list-leave-to {
  // opacity: 0;
  transform: translateY(60vh);
}
.tomask-enter-active,
.tomask-leave-active {
  transition: all 0.3s;
}
.tomask-enter,
.tomask-leave-to {
  opacity: 0;
  // transform: translateY(100vh);
}

.mask {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
</style>